<template>
  <div class="commentlist">
    <van-cell-group inset>
      <van-cell
        :title="allCount | Con"
        value="查看全部"
        is-link
        @click="onSee"
      />
      <van-cell
        :icon="userInfo.avatarUrl"
        :title="userInfo.nickName"
        :value="addTime | time"
        :label="content | str"
      />
    </van-cell-group>
    <van-action-sheet v-model="show" title="全部评论">
      <div class="content">
        <van-cell-group v-for="(item, index) in list" :key="index">
          <van-cell
            :icon="item.userInfo.avatarUrl"
            :title="item.userInfo.nickName"
            :value="item.addTime | time"
            :label="item.content"
            @click="onClick"
          />
        </van-cell-group>
      </div>
    </van-action-sheet>
    <van-action-sheet
      v-model="isshow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
    />
  </div>
</template>

<script>
import { Cell, CellGroup, ActionSheet } from "vant";
import API from "@/utils/api.js";
export default {
  name: "CommentList",
  props: ["allCount"],
  data() {
    return {
      list: [],
      show: false,
      userInfo: {},
      addTime: "",
      content: "",
      isshow: false,
      actions: [{ name: "修改" }, { name: "删除" }],
    };
  },
  created() {
    this.$get(API.GET_COMMENT_LIST, {
      type: 0,
      valueId: this.$route.query.id,
      showType: 0,
    }).then((res) => {
      console.log(res);
      this.list = res.data.list;
      this.userInfo = res.data.list[0].userInfo;
      this.addTime = res.data.list[0].addTime;
      this.content = res.data.list[0].content;
    });
  },
  methods: {
    onSee() {
      this.show = true;
    },
    onClick() {
      this.isshow = true;
    },
    onCancel() {
      this.isshow = false;
    },
    onSelect(item) {
      console.log(item.name);
      // if (item.name == "删除") {
      //   this.$post(API.POST_COMMENT_DELETE, {
      //     token: this.$store.state.token,
      //   }).then((res) => {
      //     console.log(res);
      //   });
      // }
    },
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [ActionSheet.name]: ActionSheet,
  },
  filters: {
    time: (value) => {
      return value.slice(0, 10);
    },
    str: (value) => {
      return value.slice(0, 10) + "...";
    },
    Con: (value) => {
      return " " + "评价" + value + "+";
    },
  },
};
</script>

<style lang="less" scoped>
.commentlist {
  margin-bottom: 12px;
  .van-cell-group--inset {
    border-radius: 16px;
    margin: 0 10px;
  }
  .van-icon__image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .content {
    padding: 16px 16px 80px;
  }
  .van-cell__title {
    margin-left: 8px;
  }
}
</style>